<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header" >
				<h3 class="box-title">物资信息</h3>

				<div class="box-tools" >
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							   class="form-control pull-right" placeholder="物资名称">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
								<i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-success btn-add">添加</button>
							debugger
							<button type="button" class="btn btn-success btn-update">修改</button>
							<button type="button" class="btn btn-success btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding" >
				<!-- Button trigger modal -->
				<!--<button type="button" class="btn btn-success btn-add1" data-toggle="modal" data-target="#myModal">
					添加新物资
				</button>-->

				<a href="http://static.iqiyi.com/gzbd/index.html" class="btn btn-success btn-add1" target="_blank">全国实时疫情</a>

				<!-- Modal 模态框-->
				<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								<h4 class="modal-title" id="myModalLabel">添加新物资</h4>
							</div>
							<div class="modal-body">
								<form class="form-horizontal" id="formId">
									<div class="form-group">
										<label for="wznameId" class="col-sm-2 control-label">物资名称</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="wzxx" id="wznameId" placeholder="物资信息">
										</div>
									</div>
									<div class="form-group">
										<label for="wznumId" class="col-sm-2 control-label">物资数量</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="wzsl" id="wznumId" placeholder="物资数量">
										</div>
									</div>
								<!--	<div class="form-group">
										<label for="startTimeId" class="col-sm-2 control-label">生产日期</label>
										<div class="col-sm-10">
											<input type="text" class="form-control form_datetime" name="scrq" id="startTimeId" placeholder="生产日期">
										</div>
									</div>

									<div class="form-group">
										<label for="endTimeId" class="col-sm-2 control-label">到期日期</label>
										<div class="col-sm-10">
											<input type="text" class="form-control form_datetime" name="dqrq" id="endTimeId" placeholder="到期日期">
										</div>
									</div>-->
									<div class="form-group">
										<label for="wzunitId" class="col-sm-2 control-label">物资单位</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="wzdw" id="wzunitId" placeholder="物资单位">
										</div>
									</div>
									<div class="form-group">
										<label for="wzkindId" class="col-sm-2 control-label">物资种类</label>
										<div class="col-sm-10">
											<select  class="form-control" name="wzzl" id="wzkindId">
												<option value="医用品">医用品</option>
												<option value="消杀用品">消杀用品</option>
												<option value="测试仪器">测试仪器</option>
												<option value="防护用品">防护用品</option>
												<option value="救护物资">救护物资</option>
											</select>
										</div>
									</div>

								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-cancel" data-dismiss="modal">Close</button>
								<button type="button" onclick="doSaveOrUpdate()" class="btn btn-primary">Save</button>
							</div>
						</div>
					</div>
				</div>
				<table class="table table-striped">
					<!--<table class="table table-hover" >-->
					<thead >
					<tr>
						<th class="info">ID</th>
						<th class="info">物资名称</th>
						<th class="info">物资数量</th>
						<th class="info">物资单位</th>
						<th class="info">物资种类</th>
						<!-- 	<th>状态</th> -->
						<th class="info">生产厂家</th>
						<th class="info">生产时间</th>
						<th class="info">到期时间</th>
						<th class="info">入库时间</th>
					</tr>
					</thead>
					<tbody id="tbodyId">
					<tr>
						<td colspan="7">数据正在加载中...</td>
					</tr>
					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix">
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
	<script type="text/javascript">

 $(function(){
	   //为什么要将doGetObjects函数写到load函数对应的回调内部。
	   $("#pageId").load("doPageUI",function(){
		   doGetObjects();
	   });
	   $(".input-group-btn")
	   .on("click",".btn-search",doQueryObjects)
	   .on("click",".btn-delete",doDeleteObjects)

	   .on("click",".btn-add,.btn-update",doLoadEditUI);

	   //thead中checkbox复选框事件注册
		 $("#checkAll").change(doChangeTBodyCheckboxState);
		 //tbody中checkbox对象事件注册
		 //$(".cItem").change(doChangeTHeadCheckboxState);不可以,页面加载完成cItem对象还不存在
		 //$("#tbodyId").on("change",".cItem",doChangeTHeadCheckboxState)
		 $("#tbodyId").on("change","input:checkbox",doChangeTHeadCheckboxState)
});


 function doSaveOrUpdate(){
	  var url="sww/doSaveObjects";
	var params={
	wzname:$("#wznameId").val(),
	wznum:$("#wznumId").val(),
	wzunit:$("#wzunitId").val(),
	wzkind:$("#wzkindId").val(),
	}
	  $.post(url,params,function(result){
		  if(result.state==1){
			  alert(result.message);
			  $('#myModal').modal('hide');
		  }else{
			  alert(result.message);
		  }

	  });

  }


 function doLoadEditUI(){
		var title;
		if($(this).hasClass("btn-add")){
			title="添加物资信息"
			doLoadPage(title);
		}else if($(this).hasClass("btn-update")){
			title="修改物资信息"
			doLoadPage1(title);
			var id=doGetCheckedIds();
		   console.log("id="+id)
		   if(!id){
			  alert("请先挑选一个数据");
			  return;
		   }
		   //基于id进行查询并加载编辑页面
		   doFindObjectById(id,title);
		}

	}
function doLoadPage(title){
	  // var url="wzxx/wzxx_edit"
	   var url="wzxx/wzxx_add"
	   $("#mainContentId").load(url,function(){
		   $(".box-title").html(title);
	   })
   }
function doLoadPage1(title){
		//debugger
	  var url="wzxx/wzxx_edit"
	   $("#mainContentId").load(url,function(){
		   $(".box-title").html(title);
	   })
   }
 function doFindObjectById(id,title){
 		//debugger
	   //1.params
	   var params={"wzid":id.toString()};
	   //2.url
	   var url="sww/doFindObjectById";
	   //3.ajax request
	   $.getJSON(url,params,function(result){//JsonResult
		   		doInitFormData1(result);
	   });
   }

//修改thead中checkbox状态,让其状态同步于tbody中checkbox逻辑与以后的结果.
 function doChangeTHeadCheckboxState(){
	 //1.计算tbody中checkbox状态逻辑与的结果
	 var flag=true;
	 $("#tbodyId input:checkbox")
	 .each(function(){
		 flag=flag&&$(this).prop("checked");
	 });
	 //2.修改thead中checkbox的值
	 $("#checkAll").prop("checked",flag);
 }

 //修改tbody中checkbox对象的状态,让这些对象的状态值同步于thead中checkbox对象的状态值
 function doChangeTBodyCheckboxState(){
	 debugger
	 //1.获取thead中checkbox对象状态值
	 let checked=$(this).prop("checked");//$(this)指向#checkAll对象
	 //2.修改tbody中checkbox状态值
	 $("#tbodyId input:checkbox").prop("checked",checked);
 }



 //获取日志列表页面选中记录
 function doGetCheckedIds(){
	 //1.定义数组,用于存储选中的多个记录id
	 let idArray=[];
	 //2.获取tbody中所有选中checkbox的值并将其存储到数组
	 $("#tbodyId input:checkbox:checked")
	 .each(function(){//each函数用于迭代获取的checkbox对象
		idArray.push($(this).val());//push用于向数组追加内容
	 });
	 return idArray;
 }



function doDeleteObjects(){

	let url="sww/doDeleteObjects";
	//参数定义
	var idArray=doGetCheckedIds();
	if(idArray.length==0){
		alert("请先选择");
		return;
	}
	if(!confirm("确认删除吗"))return;
	var params={ids:idArray.toString()};
	console.log(params);
	//3.发送异步请求执行删除操作
    $.post(url,params,function(result){
    	if(result.state==1){
    		alert(result.message);
    		//doGetObjects();//这样查询默认还是查询当前页
    		doRefreshAfterDeleteOk();
    	}else{
    		alert(result.message);
    	}
    })
}

function doRefreshAfterDeleteOk(){
	 //1.修改当前页码值(有条件)
	 var checkedAll=$("#checkAll").prop("checked");
	 var pageCurrent=$("#pageId").data("pageCurrent");
	 var pageCount=$("#pageId").data("pageCount");
	 if(checkedAll&&pageCurrent==pageCount&&pageCurrent>1){
		 pageCurrent--;//回到上一页
		 $("#pageId").data("pageCurrent",pageCurrent);
	 }
	 //2.执行新的查询
	 doGetObjects();
}
function doQueryObjects(){
	$("#pageId").data("pageCurrent",1);
	doGetObjects();
}




function doGetObjects(){
	   //debugger;//断点调试
	   //1.定义url和参数
	   let url="sww/doFindPageObjects";

	  let pageCurrent = $("#pageId").data("pageCurrent");
	  if(!pageCurrent)pageCurrent=1;//默认值
	  let params={pageCurrent:pageCurrent};//js对象
	  let wzname=$("#searchNameId").val();
	  if(wzname)params.wzname=wzname;
	   //2.发起异步请求
	   //请问如下ajax请求的回调函数参数名可以是任意吗？//可以,必须符合标识符的规范
    $.getJSON(url,params,function(result){
		   //请问result是一个字符串还是json格式的js对象？对象
 	     doHandleQueryResponseResult(result);
		 });//特殊的ajax函数
}



function doHandleQueryResponseResult (result){ //JsonResult
	   if(result.state==1){//ok
		//更新table中tbody内部的数据
		doSetTableBodyRows(result.data.records);//将数据呈现在页面上
		//更新页面page.html分页数据
		doSetPagination(result.data); //此方法写到page.html中
	    }else{
		alert(result.message);
	    }
}

function doSetTableBodyRows(records){
	   //1.获取tbody对象，并清空对象
	   let tBody=$("#tbodyId");
	   tBody.empty();
	   records.forEach(item=>{
			 tBody.append(doCreateTr(item));
		 });
}

function doCreateTr(item){
	 return `<tr>
	 	<td><input type='checkbox' value=${item.wzid} /></td>

	 	<td>${item.wzname}</td>
	    <td>${item.wznum}</td>
	    <td>${item.wzunit}</td>
	    <td>${item.wzkind}</td>
	    <td>${item.manufacturer}</td>
	    <td>${item.startTime}</td>
	    <td>${item.endTime}</td>
	     <td>${item.created}</td>
	    </tr>`;
   }
</script>
</div>




